<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <base href="http://localhost:8080/bookstore/">
    <title>Title</title>
    <style>
        #app4{
            width: 1400px;
            height: 800px;
        }
    </style>
</head>
<body>
<div id="app4">
    <template>
        <el-table
                :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
                style="width: 100%">
            <el-table-column
                    label="订单号"
                    prop="orderId">
            </el-table-column>
            <el-table-column
                    label="时间"
                    prop="createDate">
            </el-table-column>
            <el-table-column
                    label="总金额"
                    prop="totalPrince">
            </el-table-column>
            <el-table-column
                    label="物流"
                    prop="status">
            </el-table-column>
            <el-table-column
                    label="用户"
                    prop="userId">
            </el-table-column>
           <el-table-column
                    label="操作"
                    prop="">
               <template slot-scope="scope">
                   <el-button
                           size="mini"
                           @click="handleEdit(scope.$index, scope.row)" :disabled="disabled">修改物流</el-button>
                   <el-button
                           size="mini"
                           type="danger"
                           @click="handleDelete(scope.$index, scope.row)"  :disabled="disabled">订单完成</el-button>
               </template>
           </el-table-column>
        </el-table>
    </template>
</div>
</body>
<link href="https:/cdn.staticfile.org/layui/2.8.0/css/layui.css" rel="stylesheet">
<script src="static/script/layui.js"></script>
<link rel="stylesheet" href="static/style/layui.css">
<script src="static/script/vue.js"></script>
<script src="static/script/axios-0.18.0.js"></script>
<link rel="stylesheet" href="static/style/bootstrap.min.css">
<link rel="stylesheet" href="static/style/purecss.css">
<link rel="stylesheet" href="static/style/prism.css">
<link rel="stylesheet" href="static/style/bulma.css">
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
<link rel="stylesheet" href="element-ui-2.13.0/lib/theme-chalk/index.css">
<script src="element-ui-2.13.0/lib/index.js"></script>
<script>
    new Vue ({
        el:"#app4",
        data() {
            return {
                tableData: [],
                search: '',
                disabled:false
            }
        },
        methods: {
            handleEdit(index, row) {
                console.log(index, row);
                axios.post("OrderClientServlet?action=send",row).then(response=>{
                    this.show();
                })
            },
            handleDelete(index, row) {
                console.log(index, row);
                axios.post("OrderClientServlet?action=accept",row).then(response=>{
                    this.show();
                })
            },
            show(){
                axios.post("OrderClientServlet?action=list").then(response=>{
                    this.tableData=response.data
                })
            }

        },created(){
            this.show();
        }
    });
</script>
</html>